<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>

<!DOCTYPE html>
<html lang="zh-CN">

<head>

        <meta charset="utf-8">
        <title>PerMa - Personal Information Manager</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">   

        <!-- CSS -->
        <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
        <link rel="stylesheet" href="assets/bootstrap-3.3.4-dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.css">
        <link rel="stylesheet" href="assets/css/index-style.css">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

</head>

<body>
	
	<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
		<div class="container">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span><span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#"><img style="margin:-15px" src="assets/img/logo.png"></a>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav pull-right">
					<s:if test="#session.username == null">
						<li><a href="login.jsp">登录</a></li>
						<li><a href="#about">关于</a></li>
					</s:if>
					<s:else>
						<li><a href="main.jsp"><s:property value="#session.username"/></a></li>
					</s:else>
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>
	
        <div class="product-showcase">
            <div class="product-showcase-pattern">
                	<div class="container">
                      	<div class="row">
                            <div class="col-md-12">
                            	<div class="jumbotron product-background" id="jum">
									<p style="font-size:64px">免费的信息管理平台</p>
									<p>帮助你随时随地，管理自己的信息</p>
									<p>
										 <a class="btn btn-primary btn-lg" href="#about" role="button">了解更多</a>
										 <s:if test="#session.username == null">
										 	<a class="btn btn-primary btn-lg" href="#" data-toggle="modal" data-target="#register">快速注册</a>
										 </s:if>
									</p>
								</div>
                        	</div>
                       </div>
                </div>
            </div>
        </div>
		<div class="captions">
		<h1  id="about">我们做什么</h1>
		<p>通过我们的平台，你能随时随地地保存、修改、删除自己的常用个人信息</p>
		<p>在使用其他网站的时候，你只需要提供独特的身份信息，其他网站就可以通过这些独特的信息获得你所有的个人信息</p>
		</div>
	
		<div class="container">
			<hr/>
	  		<div class="row">
	  			<div class="col-md-4 icon">
	  				<img alt="" src="assets/img/figure/21.png">
	  				<p>在这里记录下你的个人信息</p><p>方便管理、方便修改</p>
	  			</div>
	  			<div class="col-md-4 icon">
	  				<img alt="" src="assets/img/figure/3.png">
	  				<p>你可以对其进行分组</p><p>方便以不同的信息注册不同的页面</p>
	  			</div>
	  			<div class="col-md-4 icon">
	  				<img alt="" src="assets/img/figure/6.png">
	  				<p>当外来网站请求访问你的信息时</p><p>验证和加密的工作必不可少</p>
	  			</div>
	  		</div>
	  		<hr>
	  		
	  		<footer id="foot">
			<p class="pull-right" ><a href="#top">回到顶部</a></p>
			<p>© 2015 We</p>
			</footer>
	  		
		</div>
		
		<div class="modal fade" id="register">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h2>快速注册</h2>
		      </div>
		      <div class="modal-body">
					<form class="form-horizontal Registerform" action="register.action" method="post" onsubmit="return validate_form(this)">
                    	<div class="item">
							<div class="form-group">
								<label for="username" class="col-sm-3 control-label">用户名</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="username" placeholder="Username" name="user.username">
								</div>
							</div>
							<div class="form-group">
								<label for="password" class="col-sm-3 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
								<div class="col-sm-8">
									<input type="password" class="form-control" id="password" placeholder="Password" name="user.password">
								</div>
							</div>
							<div class="form-group">
								<label for="username" class="col-sm-3 control-label">验证码</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" name="captcha" placeholder="Captcha">
								</div>
								<div class="col-sm-3">
									<img src="random.jpg" />
								</div>
							</div>
						</div>
							<div class="modal-footer item">
								已有账号？<a href="login.jsp"><span style="font-size:20px">快速登录</span></a>
								<div class="form-group buttons">
									<div class="col-sm-offset-4 col-sm-4">
										<button type="submit" class="btn btn-default btn-primary">注册</button>
										<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									</div>
								</div>
							</div>
					</form>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		
        <!-- Javascript -->
        <script src="assets/jquery-1.11.1/jquery.js"></script>
        <script src="assets/jquery-1.11.1/jquery.backstretch.min.js"></script>
        <script src="assets/bootstrap-3.3.4-dist/js/bootstrap.js"></script>
        <script src="assets/js/background.js"></script>
		<script src="assets/js/validate.js"></script>
    </body>

</html>

	